
$table_header_bg: #434a54;
$table_tr_bg: #e7eaec;


.table-wrapper {

  .table-header {
    border: 1px solid $table_header_bg;
    background: $table_header_bg;
    color: $white;
    height: 34px;
    padding: 0;

    .header-icon {
      display: block;
      width: 30px;
      height: 32px;
      position: relative;
      float: left;
      font-size: 111%;
      line-height: 32px;
      text-align: center;
      margin-right: -10px;
    }

    h2 {
      margin-left: 10px;
      float: left;
      height: 100%;
      width: auto;
      display: inline-block;
      font-size: 14px;
      position: relative;
      line-height: 30px;
      font-weight: 400;
      letter-spacing: 0;
    }

    .header-ctrl {
      display: inline-block;
      float: right;
      width: auto;
      height: 32px;
      line-height: 32px;
      position: relative;
      cursor: pointer;
      padding: 0 8px;
      text-align: center;
    }
  }

  table {
    thead {
      tr {
        background-color: $table_tr_bg;
      }
    }



    .center {
      text-align: center;
    }

    .operate {
      .btn {
        margin: 0 2px;
      }
    }
  }

  .toolbar {
    border: 1px solid #ddd;
    border-top: 0;
    border-bottom: 0;
    padding: 5px 10px;
  }

  .table-footer {
    .pagination {
      .active {
        a {
          background-color: $udc-green;
          border-color: $udc-green;
        }
      }
    }

    .paginator-pager {
      float: right;
      margin: 5px 5px;
    }
    .paginator-total {
      line-height: 32px;
      float: right;
      margin: 5px 10px;
    }

  }

  .table-nodata {
    margin-top: -20px;
    padding: 20px 0;
    border: 1px solid $grey;
    border-top: 0;
  }

}
